<template>
  <div id="bar_app">
  </div>    
</template>

<script>
// import echarts from 'echarts'
import * as echarts from 'echarts'

export default {
    mounted(){
        const dom = document.querySelector("#bar_app")
        const myEcharts = echarts.init(dom)
        
        const option = {
            title: {
                text: 'WEB六个阶段难度'
            },
            tooltip: {},
            legend: {
                data:['难度']
            },
            xAxis: {
                data: ["第一阶段","第二阶段","第三阶段","第四阶段","第五阶段","第六阶段"]
            },
            yAxis: {},
            series: [{
                name: '难度',
                type: 'bar',
                data: [3, 5, 10, 7, 5, 1],
                itemStyle: {
                color: 'red'
                }
            }]
        };
        
        myEcharts.setOption(option)

    }
}
</script>

<style>
    #bar_app{
        width: 100%;
        height: 400px;        
    }
</style>